import { Component, ReactNode,ChangeEvent,KeyboardEvent,MouseEvent} from "react";
import {TodoHeadProp} from '../Impl/TodoImp'
interface TodoTextState{
    text:string
}
class TodoHead extends Component<TodoHeadProp>{
    state:TodoTextState={
        text:""
    }
    constructor(props:TodoHeadProp){
        super(props);
        // bind之后要重新赋值
        this.changeHandler=this.changeHandler.bind(this);
    }
    // changeHandler(e:any){
    changeHandler(e:ChangeEvent<HTMLInputElement>){//受控组件onChanage事件对象是ChangeEvent
            // console.log(e);
        this.setState({
            text:e.target.value
        });
    }
    addItem(e:KeyboardEvent){//键盘事件对象 是KeyBorderEvent类型 React
        // console.log(e);
        if(e.code==="Enter"){
            // console.log(this.state.text);
            this.props.additem(this.state.text);
            this.setState({
                text:""
            })
        }
    }
    clickme(e:MouseEvent){//鼠标事件类型 MouseEvent
        console.log("鼠标事件===>",e);
    }
    render(): ReactNode {
        return <>
            <div><input type="text" 
            value={this.state.text} 
            onKeyDown={(e)=>this.addItem(e)}
            onChange={this.changeHandler} placeholder="按下enter键添加"/>
            <button onClick={(e)=>this.clickme(e)}>click</button>
            </div>
        </>
    }
}
export default TodoHead